<template>
  <Layout
    :tabs="state"
    v-model="page"
    :total="total"
    @change="getList()"
    @tab="
      page.tab = $event;
      search();
    "
  >
    <div slot="buttons" class="button">
      <div class="left">
        <el-button
          size="small"
          type="success"
          @click="
            model = {};
            $refs.d.show();
          "
          >导出数据</el-button
        >
        <el-button size="small" type="danger" @click="deleteOrderList()"
          >批量删除</el-button
        >
      </div>
      <div class="right">
        <div v-show="!showAS">
          <el-input
            v-model="page.no"
            placeholder="要搜索的订单编号"
            size="small"
          ></el-input>
          <el-button size="small" type="info" @click="search()">搜索</el-button>
          <el-button size="small" @click="showAS = true">高级搜索 </el-button>
        </div>
      </div>
    </div>
    <AS
      v-show="showAS"
      @hide="showAS = false"
      :opts="searchOpts"
      v-model="page"
    />
    <Table
      @select="select"
      @select-all="select"
      :cols="cols"
      :data="list"
      :loading="queryloading"
    >
      <template v-slot:goods="{ row }">
        <div>订单编号：{{ row.no }} 下单时间：{{ row.create_time }}</div>
        <div>{{ row.closed ? "该商品已l删除" : "该商品可以正常购买" }}</div>
        
      </template>
      <template v-slot:pay="{ row: { total_price } }">
        ￥{{ total_price }}
        <div>(含运费: ￥0.00)</div>
      </template>
      <template
        v-slot:buyer="{
          row: {
            user: { username, id },
          },
        }"
      >
        {{ username }}
        <div>(用户id:{{ id }})</div>
      </template>
      <template
        size="small"
        v-slot:payOption="{ row: { payment_method = 'default' } }"
      >
        <el-tag :type="paymenOptions[payment_method || 'default']?.color">
          {{ paymenOptions[payment_method || "default"]?.title }}
        </el-tag>
      </template>
    </Table>

    <DF
      @confirm="exportFile"
      :opts="opts"
      v-model="model"
      ref="d"
      title="导出数据"
    />
  </Layout>
</template>

<script>
import { getOrderlist, getExportFileDate, deleOrders } from "api/goods";
import { download } from "uti/common";
import { pageMixins } from "uti/mixins";
const state = {
  all: "全部",
  nopay: "待付款",
  noship: "代发货",
  shiped: "已发货",
  received: "已收货",
  finish: "已完成",
  closed: "已关闭",
  refunding: "退款中"
};
export default {
  name: "goodsList",
  mixins: [pageMixins],

  data() {
    return {
      showAS: false,
      /**
       * 搜索表单配置
       */
      searchOpts: {
        no: {
          title: "订单编号",
          max: 20
        },
        starttime: {
          title: "下单时间",
          tag: "date",
          type: "daterange"
        },
        name: {
          title: "收货人",
          max: 20
        },
        phone: {
          title: "手机号",
          max: 11
        }
      },

      ids: [],
      /**
       * 表单配置想
       */
      opts: {
        tab: {
          title: "订单类型",
          required: true,
          tag: "select",
          values: Object.entries(state).map(([value, label]) => ({
            value,
            label
          }))
        },
        starttime: {
          title: "时间范围",
          tag: "date",
          required: true,
          type: "daterange"
        }
      },
      /**
       * 模型
       */
      model: {},
      /**
       * 分页数据
       */
      page: {
        tab: "all",
        ...this.page,
        no: ""
      },
      /**
       * 表格配置项
       */
      cols: [
        {
          type: "selection"
        },
        {
          title: "商品",
          slot: "goods"
        },
        {
          title: "实付款",
          slot: "pay"
        },
        {
          title: "支付方式",
          slot: "payOption"
        },
        {
          title: "配送方式",
          slot: "post"
        },
        {
          title: "交易状态",
          slot: "state"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      /**
       * 支付信息
       */
      paymenOptions: {
        default: {
          color: "info",
          title: "未支付"
        },
        alipay: {
          color: "",
          title: "支付宝支付"
        },
        wxpay: {
          color: "success",
          title: "微信支付"
        }
      },
      /**
       * 状态
       */
      state
    };
  },
  methods: {
    /**
     * 搜索
     */
    search() {
      page.num = 1;
      getList();
    },
    /**
     * 批量删除订单
     */
    async deleteOrderList() {
      if (!this.ids.length) {
        return this.$m.warning("请你至少选中一个要删除的");
      }
      let res;
      try {
        console.log(111);
        await this.$confirm(`您确定要删除选中嘛？`);
        console.log(222);
        await deleOrders(this.ids);
        this.$m.success("删除成功");
        this.getList();
      } catch (error) {}
      res && res();
    },
    /**
     * 选择
     */
    select(selection) {
      this.ids = selection.map(c => c.id);
      console.log(this.ids);
    },
    /**
     * 导出文件
     */
    async exportFile() {
      let dd = this.$refs.d;
      try {
        const [starttime, endtime] = this.model.starttime;
        console.log(starttime, endtime);
        dd.start();
        const data = await getExportFileDate({
          ...this.model,
          starttime: starttime.format(),
          endtime: endtime.format()
        });
        download(data, "1657178298.xlsx");
        dd.hide();
        console.log(this.model);
      } catch (error) {
        console.log(error);
      }
      dd.stop();
    },
    /**
     * 获取订单
     */
    async getList() {
      try {
        this.queryloading = true;
        const { starttime } = this.page;
        const model = { ...this.page };
        if (starttime) {
          const [s, e] = starttime;
          Object.assign(model, {
            starttime: s.format(),
            endtime: e.format()
          });
        }
        const { list, totalCount } = await getOrderlist(model);
        this.ids = [];
        this.total = totalCount;
        this.list = list;
      } catch (error) {}
      this.queryloading = false;
    }
  },
  created() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .right {
    ::v-deep .el-input {
      width: 150px;
      margin-right: 10px;
    }
  }
}
</style>